window.addEventListener('load', function() {
    var arr_l = document.querySelector('.arrow_left');
    var arr_r = document.querySelector('.arrow_right');
    var focus = document.querySelector('.focus');
    var focus_ul = focus.querySelector('ul');
    //鼠标经过显示轮播图左右箭头
    focus.addEventListener('mouseenter', function() {
            arr_l.style.display = 'block';
            arr_r.style.display = 'block';
            clearInterval(timer);
            timer = null; //清除变量
        })
        //鼠标离开显示轮播图左右箭头
    focus.addEventListener('mouseleave', function() {
        arr_l.style.display = 'none';
        arr_r.style.display = 'none';
        timer = setInterval(function() {
            // alert(1);
            //手动调用事件
            arr_r.click();
        }, 3000);
    })

    //动态生成小圆圈
    var ol = focus.querySelector('ol');
    var focusWidth = focus.offsetWidth;
    var index = 0;
    for (let i = 0; i < focus_ul.children.length; i++) {
        var focus_li = document.createElement('li');
        ol.appendChild(focus_li);
        //索引号必须保存在变量中，i会消失
        focus_li.setAttribute('index', i);
        focus_li.addEventListener('mouseenter', function() {
            //去掉所有
            for (let j = 0; j < ol.children.length; j++) {
                ol.children[j].className = '';
            }
            //留下自己
            this.className = 'current';
            //点击小圆圈移动图片
            // console.log(this.getAttribute('index'));
            //用get获取属性
            animate(focus_ul, -this.getAttribute('index') * focusWidth);
            index = this.getAttribute('index');
        })
    }
    ol.children[0].className = 'current';
    //节流阀
    var flag = true;
    //点击左侧按钮滚动-1
    arr_l.addEventListener('click', function() {
        if (flag) {
            flag = false;
            index--;
            if (index == -1) {
                index = index + focus_ul.children.length;
            }
            animate(focus_ul, -index * focusWidth, function() {
                flag = true;
            });
            circleChange();
        }
    })
    arr_r.addEventListener('click', function() {
        if (flag) {
            flag = false;
            index++;
            index = index % 4;
            animate(focus_ul, -index * focusWidth, function() {
                flag = true;
            });
            circleChange();
        }
    })



    function circleChange() {
        //去掉所有
        for (let j = 0; j < ol.children.length; j++) {
            ol.children[j].className = '';
        }
        //留下自己
        ol.children[index].className = 'current';
    }
    //无缝滚动版本(1.无缝滚动实现下面圆点的高亮显示需要额外声明一个变量circle)
    //首先复制一份孩子1到最后
    // var copy_li_0 = focus_ul.children[0].cloneNode;
    // // console.log(copy_li_0);
    // focus_ul.appendChild(focus_ul.children[0].cloneNode(true));
    // arr_r.addEventListener('click', function() {
    //     if (index == focus_ul.children.length - 1) {
    //         index = 0;
    //         focus_ul.style.left = 0;
    //     }
    //     index++;
    //     animate(focus_ul, -index * focusWidth);
    //     //去掉所有
    //     for (let j = 0; j < ol.children.length; j++) {
    //         ol.children[j].className = '';
    //     }
    //     //留下自己
    //     ol.children[index].className = 'current';
    // })

    //自动滚动
    var timer = setInterval(function() {
        // alert(1);
        //手动调用事件
        arr_r.click();
    }, 3000);

    //节流阀
    var isToggle = true;

    //jquery部分： 电梯导航
    $(".box_hd h3").each(function(i, ele) {
        // console.log(ele.innerText);
        $(".fixedtool ul li").eq(i).text(ele.innerText);
    });

    function isShow_fixedTool(index) {
        //是否展示
        if ($(document).scrollTop() > $(".recom_bd").offset().top) {
            $(".fixedtool").fadeIn();
        } else {
            $(".fixedtool").fadeOut();
        }
        //同步电梯层
        //节流阀，用于点击的情况下跳过中间变红的部分
        if (isToggle) {
            for (let i = $(".box_hd").length - 1; i > 0; i--) {
                // console.log("第" + i + "个offset:" + $(".box_hd").eq(i).offset().top);
                // console.log(i);
                //从3遍历到0，如果大于当前循环的楼层的高度，就把类样式设置到这一层并return
                //如果检测过1后，还没有找到，那就是在上面，就给直接最后一个
                if ($(document).scrollTop() > $(".box_hd").eq(i).offset().top) {
                    // $(".fixedtool ul li").eq(i).siblings().removeClass("current");
                    // $(".fixedtool ul li").eq(i).addClass("current");
                    $(".fixedtool ul li").eq(i).removeClass("current").addClass("current").siblings().removeClass("current");
                    return;
                }
            }
            $(".fixedtool ul li").eq(0).removeClass("current").addClass("current").siblings().removeClass("current");
        }
        // $(".fixedtool ul li").eq(0).removeClass("current").addClass("current").siblings().removeClass("current");
    };
    $(window).scroll(isShow_fixedTool);
    $(".fixedtool ul li").on("click", function() {
        // console.log($(this).index());
        isToggle = false;
        $("body,html").stop().animate({ //固定写法，写元素
            scrollTop: $(".box_hd").eq($(this).index()).offset().top + 1
                // scrollTop: 0
        }, function() {
            isToggle = true;
            isShow_fixedTool();
        });
    });

    isShow_fixedTool();
})